import React, { useEffect } from "react";
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
import { configLanguage } from "./config";
import { Select } from 'antd'
import ItemCode from "./itemCode";
interface IProps {
    onChange: (params: string, type: string) => void;
    codeParams: {
        code_content: string
        css_content: string
        html_content: string
    }
}
function InputCode(props: IProps) {
    const { onChange, codeParams } = props;
    const [code, setCode] = React.useState(`
        function Greeting() {
          return <h1>Hello, World!</h1>;
        }
      `)
    const [cssCode, setCssCode] = React.useState(`
        div{
        color:red;
        }
        #init{
        color:red;
        }
        `)
    useEffect(() => {
        if (codeParams?.code_content) {
            setCode(codeParams.code_content)
        } else {
            setCode('function Greeting() { return <h1>Hello, World!</h1>; }')
        }
    }, [codeParams])
    const handleCodeChange = (newCode) => {
        onChange(newCode, 'code_content')
        setCode(newCode);
        // 在这里可以对新的代码进行处理，比如发送到服务器等
        // console.log('实时获取到的代码:', newCode);
    };
    // console.log(code)
    return (
        <div className=" flex flex-col justify-between ">
            <div className=" relative ">
                <div className=" absolute right-1 top-1">
                    <Select className="  " style={{ width: '240px', }} options={configLanguage}></Select>
                </div>
                <LiveProvider code={code} scope={{}} >

                    <LiveEditor onChange={handleCodeChange} />
                    <LiveError />
                    <LivePreview />
                </LiveProvider>

            </div>
            {/* <div>
                <LiveProvider language="html" code={`<div id="init">
                    123
                </div>`} scope={{ cssCode }} >
                    <LiveEditor />
                    <LiveError />
                    <LivePreview />
                </LiveProvider>
            </div>
            <h1>css</h1> */}
            <ItemCode code="<div></div>" ></ItemCode>
            {/* <div className=" relative ">
                <LiveProvider language="css" code={cssCode} scope={{}} >
                    <LiveEditor onChange={setCssCode} />
                    <LiveError />
                    <LivePreview />
                </LiveProvider>
            </div> */}
        </div>
    );
}
export default InputCode